本日小作品:
https://codepen.io/linchinhsuan/pen/QWNBVMm
練習重點摘要:
tr:nth-child(even)
針對表格的偶數行,為其背景做上色,最終達到雙色一目了然的效果。:nth-child()選取器可以選取特定物件,例如常見的有odd和even兩個,意思就是選取奇/偶數子物件。
line-height
在more這個<a>
中為了讓文字置中,可以讓line-height
等於物件的高,這樣就會達到置中的效果,是很常見的手法。
<form action="#">
表格的標籤,action屬性的值代表這個表格資料送出要送到哪裡去。
<input type="radio" name="teamFan" id="teamL">
type="radio"
是單選,只要後面的name的值一樣就會被當作同一組,一組只能單選一個答案。
<label for="teamL">統一</label>
如果不使用<label>
那當我們點擊「統一」這個文字的時候就不會有任何反應。為了擴大點擊範圍,可以使用<label>
,後面的for的值是你想擴大點擊範圍的input的id。
placeholder
這個值可以顯示在輸入框中,並且在輸入之後就消失,用以提示使用者達到更好的使用者體驗。
---
本日結語:
今天是第四天,主要是練習表格和表單的內容,若有誤之處懇請各路高手賜教!